<template>
  <h2>基本信息</h2>
  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="form"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
    <!-- 按钮 新增 -->
    <el-form-item>
        <el-button type="danger" @click="sheepWeighedAdd(ruleFormRef)">
          新增
        </el-button>
      </el-form-item>
  
    <!-- 日期框 称重日期 -->
    <el-form-item label="称重日期：" prop="sheepWeighedTime">
        <el-col :span="11">
          <el-date-picker
            v-model="form.sheepWeighedTime"
            type="date"
            placeholder="请选择称重日期"
            style="width: 100%"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-col>
      </el-form-item>
      <!-- 下拉框 羊只耳号 breedingSheepArchiveId -->
      <el-form-item label="羊只耳号：">
        <el-select v-model="form.breedingSheepArchiveId" placeholder="请选择羊只耳号">
          <el-option v-for="item in breedingList" :label="item.auricle" :value="item.breedingSheepArchiveId" />
        </el-select>
      </el-form-item>
      <!-- 下拉框 称重类型 -->
      <el-form-item label="称重类型：" prop="sheepWeighedType">
        <el-select v-model="form.sheepWeighedType" placeholder="请选择称重类型">
          <el-option label="断奶重" value="1" />
          <el-option label="月龄重" value="2" />
          <el-option label="出生重" value="3" />
        </el-select>
      </el-form-item>
      <!-- 文本框 重量(公斤) -->
      <el-form-item label="重量(公斤)：" prop="sheepWeighedHeight">
        <el-input v-model="form.sheepWeighedHeight" />
      </el-form-item>
    </el-form>
  </template>
  
  <script setup lang="ts">
  import {ref,reactive,onMounted} from 'vue';
  import axios from 'axios';
  import { useRouter,useRoute } from 'vue-router';
  const router=useRouter();
  const route=useRoute();
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
  import { ElMessage } from 'element-plus';
  //生命周期 钩子函数
  onMounted(()=>{
    postBreedingList(); //羊只耳号
  })
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const form = reactive({
    sheepWeighedTime: '2024-11-19T13:54:15.264Z',
    sheepWeighedType:'',
    breedingSheepArchiveId:'',
    sheepWeighedHeight:'',
  
  })
  
  //验证
  const rules = reactive({
    sheepWeighedTime: [ 
      { required: true, message: '请选择称重日期', trigger: 'blur' },
    ],
    breedingSheepArchiveId: [ 
      { required: true, message: '请选择羊只耳号', trigger: 'blur' },
    ],
    sheepWeighedHeight: [
      { required: true, message: '请选择重量(公斤)', trigger: 'blur' },
    ],
    sheepWeighedType: [
      { required: true, message: '请选择称重类型', trigger: 'change' },
    ],
  })
  
  //羊只称重-新增
  const sheepWeighedAdd = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log(form)
  
        //发送网络请求
        axios.post('http://localhost:5012/api/Breedings/SheepWeighedAdds',{
          sheepWeighedTime: form.sheepWeighedTime,
          sheepWeighedType:form.sheepWeighedType,
          breedingSheepArchiveId:form.breedingSheepArchiveId,
          sheepWeighedHeight:form.sheepWeighedHeight,
        }).then(res=>{
          console.log(res.data.code);
          if(res.data.code==0){
            ElMessage.success('羊只称重信息新增成功!');
            router.push('SheepWeighedList');
          }
          else{
            ElMessage.error('羊只称重信息新增失败!');
            return;
          }
        }).catch(err=>{
          console.log(err);
        })
  
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  //羊只耳号
  const breedingList=ref([]);
  const postBreedingList=()=>{
   axios.post('http://localhost:5012/api/SheepFile/BasicInformationList',{}).then(res=>{
    console.log(res);
    breedingList.value=res.data.data;
   })
   .catch(err=>{
    console.log(err);
   })
  }
  </script>